<template>
  <!-- 交易记录页面 -->
  <view class="main">
    <view class="xian"></view>
    <!-- 无交易记录 -->
    <view class="wu_Huo" v-if="data.length < 1">
      <image src="../../imges/wuhuodong.png" mode="aspectFill"></image>
      <text>暂无交易记录</text>
    </view>
    <view v-if="data.length > 0" class="content">
      <view class="records" v-for="item in data">
        <view class="left">
          <image
            src="../../imges/jiaoyi.png"
            mode="aspectFill"
            v-if="item.payType == 6"
          ></image>
          <image
            src="../../imges/jiaoyi1.png"
            mode="aspectFill"
            v-if="item.payType == 0"
          ></image>
          <image
            src="../../imges/tx.png"
            mode="aspectFill"
            v-if="item.payType == 1"
          ></image>
          <image
            src="../../imges/tuikuan.png"
            mode="aspectFill"
            v-if="item.payType == 2"
          ></image>
        </view>
        <view class="right">
          <view class="r-l">
            <text>{{ item.topic }}</text>
            <view class="bottom">
              {{ item.createTime }}
              <image
                src="../../imges/secces.png"
                mode=""
                v-if="item.payWay == 1"
              ></image>
              <image
                src="../../imges/qb.png"
                mode=""
                v-if="item.payWay == 0"
              ></image>
            </view>
          </view>
          <view class="shouru" v-if="item.payType == 0 || item.payType == 2">
            +{{ item.account }}
          </view>
          <view class="zhichu" v-if="item.payType == 6 || item.payType == 1">
            {{ item.account }}
          </view>
        </view>
      </view>
    </view>
    <!-- <view class="more" v-show="more">
			<text>查看更多</text>
			<image src="../../imges/xiam.png" mode=""></image>
		</view> -->
  </view>
</template>

<script>
import request from "../../utils/request.js";
export default {
  data() {
    return {
      curpage: 1,
      more: false,
      data: [],
      pageNum: 1,
      wudata: true,
    };
  },
  onReachBottom() {
    // console.log(123)
    // this.more = true
    // this.pageNum++;
    // this.jiaoyiList();
    if (this.wudata) {
      uni.showLoading({
        title: "加载中",
      });
      this.pageNum++;
      this.jiaoyiList();
    }
  },
  onPullDownRefresh() {
    setTimeout(() => {
      this.data = [];
      this.jiaoyiList();
      uni.stopPullDownRefresh();
      uni.showToast({
        title: "刷新成功",
        duration: 1500,
        icon: "none",
      });
    }, 1000);
  },
  onLoad() {
    this.jiaoyiList();
  },
  methods: {
    jiaoyiList() {
      let token = uni.getStorageSync("token");
      const that = this;
      // console.log(token, 'token')
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作！",
          duration: 2000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 2000);
      } else {
        request({
          url:
            "app/account/expenseCalendars?uid=63755c41127811e981b5fa163e4d6bc3",
          method: "POST",
          header: {
            "content-type": "application/json;charset=UTF-8",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": "1.3.3",
            "Source-Type": 7,
            token: token,
          },
          data: {
            pageNumber: this.pageNum,
            pageSize: 10,
          },
        }).then((res) => {
          if (res.data.code == 200) {
            if (that.pageNum > 1) {
              uni.showToast({
                title: "加载完成",
                duration: 1000,
                icon: "none",
              });
              that.data = [
                ...that.data,
                ...res.data.data.actAccountRecord.rows,
              ];
            } else {
              that.data = res.data.data.actAccountRecord.rows;
            }
            // that.data = res.data.data.actAccountRecord.rows
            // that.data.push.apply(
            //   that.data,
            //   res.data.data.actAccountRecord.rows
            // );
            if (res.data.data.actAccountRecord.rows.length < 1) {
              uni.showToast({
                title: "没有更多数据了",
                duration: 2000,
                icon: "none",
              });
              that.wudata = false;
            }
          } else if (res.data.code == 401) {
            uni.showToast({
              title: "登录失效，请重新授权登录！",
              duration: 2000,
              icon: "none",
            });
            setTimeout(() => {
              uni.navigateTo({
                url: "/pages/index/index",
              });
            }, 2000);
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.xian {
  height: 1rpx;
  background-color: #eeeeee;
}
.wu_Huo {
  margin-top: 300rpx;
  display: flex;
  flex-direction: column;
  align-items: center;

  image {
    width: 320rpx;
    height: 260rpx;
  }

  text {
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(136, 136, 136, 1);
    line-height: 37px;
  }
}
.content {
  padding-top: 60rpx;
}
.records {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 52rpx;
  box-sizing: border-box;
  margin-bottom: 27rpx;
  .left {
    width: 100rpx;
    height: 120rpx;
    margin-right: 25rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    image {
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;
    }
  }
  .right {
    width: 571rpx;
    height: 120rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 60rpx;
    padding-bottom: 0rpx;
    border-bottom: 1rpx solid #eeeeee;
    .r-l {
      display: flex;
      height: 80rpx;
      flex-direction: column;
      justify-content: space-between;
      text {
        font-size: 28rpx;
        color: #333333;
        font-weight: bold;
      }
      .bottom {
        font-size: 26rpx;
        color: #333333;
        display: flex;
        align-items: center;
        image {
          margin-left: 20rpx;
          width: 35rpx;
          height: 28rpx;
        }
      }
    }
    .shouru {
      font-size: 40rpx;
      color: #d18b19;
      font-weight: bold;
    }
    .zhichu {
      font-size: 40rpx;
      color: #333333;
      font-weight: bold;
    }
  }
}
.more {
  width: 100%;
  height: 120rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 26rpx;
  color: #333333;
  image {
    width: 28rpx;
    height: 14rpx;
    margin-left: 10rpx;
  }
}
</style>
